<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Modal Dialog</title>
    <script type="text/javascript">
        function showLocation() {

            var se = document.getElementById("locationSelection");
            se.style.top = (document.body.clientHeight - 240) / 2;
            se.style.left = (document.body.clientWidth - 320) / 2;

            var dialog = document.getElementById("dialog");
            dialog.style.height = document.body.clientHeight;
            dialog.style.width = document.body.clientWidth;
            dialog.style.display = "block";
        }

        function selectValue() {
            var loc = document.getElementById("location");
            var sel = document.getElementById("selection");
            loc.value = sel.value;

            var dialog = document.getElementById("dialog");
            dialog.style.display = "none";
        }
    </script>
    <style type="text/css">
        .opacity
        {
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
            filter: alpha(opacity=80);
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="location" name="location" value=" " />
        <a href="javascript:showLocation();">Select Location</a>
    </div>
    <div style="background-color: Gray; width: 1600; height: 880; z-index: 9999px; position: absolute; top: 0; left: 0; display: none;" class="opacity" id="dialog">
        <div style="background-color: White; position: relative; height: 240; width: 320; border: 15px solid;" id="locationSelection">
            <!--Content-->
            <div style="margin: 25px auto auto 80px;">
                <div>
                    Please selection the location</div>
                <select id="selection">
                    <option value="Shanghai">Shanghai</option>
                    <option value="Beijing">Beijing</option>
                    <option value="Suzhou">Suzhou</option>
                    <option value="Nanjing">Nanjing</option>
                </select>
                <div>
                    <input type="button" name="Select" value="Select" onclick="selectValue();" />
                </div>
            </div>
            <!--End Content-->
        </div>
    </div>
</body>
</html>
